<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="1200px">

      <el-form :model="form" class="form-inline" ref="form" label-width="150px" size="mini">
          <el-tabs v-model="activeName">
              <el-tab-pane label="理赔账号信息" name="first">
                  <el-card class="box-card" shadow="never">
                      <el-row :gutter="4">
                          <el-col :span="24">
                              <div style="overflow:hidden; margin:12px 0">
                                  <div
                                      style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                  </div>
                                  <div style="float:left">投保人信息</div>
                              </div>
                          </el-col>
                          <el-col :span="8"><el-form-item label="开户名称" style="width:100%">
                                  {{ row.frontReportInsureAccount.accountName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="开户类型">
                                  {{ row.frontReportInsureAccount.accountType }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item style="width:100%" label="地区">
                                  {{ row.frontReportInsureAccount.areaName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="地区银行" style="width:100%">
                                  {{ row.frontReportInsureAccount.bankName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="分支行名称">
                                  {{ row.frontReportInsureAccount.bankBranchName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item style="width:100%" label="卡号">
                                  {{ row.frontReportInsureAccount.accountNumber }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="联系方式" style="width:100%">
                                  {{ row.frontReportInsureAccount.contactPhone }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="证件号码">
                                  {{ row.frontReportInsureAccount.certificateNumber }}
                              </el-form-item></el-col>
                          <el-col :span="24">
                              <div style="overflow:hidden; margin:12px 0">
                                  <div
                                      style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                  </div>
                                  <div style="float:left">报案信息</div>
                              </div>
                          </el-col>
                          <el-col :span="8"><el-form-item label="货物名称" style="width:100%">
                                  {{ row.frontReportInsure.goodsName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="出险箱号" style="width:100%">
                                  {{ row.frontReportInsure.containerNumber }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="损失金额" style="width:100%">
                                  {{ row.frontReportInsure.lossFee }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="现场联系人" style="width:100%">
                                  {{ row.frontReportInsure.sceneName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="联系方式" style="width:100%">
                                  {{ row.frontReportInsure.scenePhone }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="出险地址" style="width:100%">
                                  {{ row.frontReportInsure.reportPlace }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="出险原因" style="width:100%">
                                  {{ row.frontReportInsure.reportCause }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="损失情况说明" style="width:100%">
                                  {{ row.frontReportInsure.explain }}
                              </el-form-item></el-col>
                      </el-row>
                  </el-card>
              </el-tab-pane>
              <el-tab-pane label="保单基本信息" name="second">
                  <el-card class="box-card" shadow="never">
                      <el-row :gutter="4">
                          <el-col :span="24">
                              <div style="overflow:hidden; margin:12px 0">
                                  <div
                                      style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                  </div>
                                  <div style="float:left">投保人/被投保人信息</div>
                              </div>
                          </el-col>
                          <el-col :span="8"><el-form-item label="投保人" style="width:100%">
                                  {{ row.insureName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="证件类型">
                                  {{ row.insureCertificateType == 1 ? '身份证' : '统一社会信用代码' }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item style="width:100%" label="证件号码">
                                  {{ row.insureCertificateNumber }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="被投保人" style="width:100%">
                                  {{ row.insuredName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="证件类型">
                                  {{ row.insuredCertificateType == 1 ? '身份证' : '统一社会信用代码' }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item style="width:100%" label="证件号码">
                                  {{ row.insuredCertificateNumber }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="联系人" style="width:100%">
                                  {{ row.contactName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="联系方式">
                                  {{ row.contactPhone }}
                              </el-form-item></el-col>
                          <el-col :span="24">
                              <div style="overflow:hidden; margin:12px 0">
                                  <div
                                      style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                  </div>
                                  <div style="float:left">货运信息</div>
                              </div>
                          </el-col>
                          <el-col :span="8"><el-form-item label="标记发票号码运单号" style="width:100%">
                                  {{ row.tagInvoiceWaybill }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="包装和数量" style="width:100%">
                                  {{ row.containerCount }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="货物类型" style="width:100%">
                                  {{ row.insureGoodsJson ? JSON.parse(row.insureGoodsJson).goodsTypeName : '' }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="货物明细" style="width:100%">
                                  {{ row.goodsName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="包装" style="width:100%">
                                  {{ row.packName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="集装箱号" style="width:100%">
                                  {{ row.containerNumber }}
                              </el-form-item></el-col>
                          <el-col :span="24">
                              <div style="overflow:hidden; margin:12px 0">
                                  <div
                                      style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                  </div>
                                  <div style="float:left">运输信息</div>
                              </div>
                          </el-col>
                          <el-col :span="8"><el-form-item label="运输工具" style="width:100%">
                                  {{ row.transportTool }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="航次/车牌号" style="width:100%">
                                  {{ row.shipNumber }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="运输方式" style="width:100%">
                                  {{ row.transportTypeName }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="启运地" style="width:100%">
                                  {{ row.startPlace }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="中转地" style="width:100%">
                                  {{ row.middlePlace }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="目的地" style="width:100%">
                                  {{ row.endPlace }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="启用日期" style="width: 100%">
                                  <span>{{ row.startTime
                                      }}</span>
                              </el-form-item></el-col>
                          <!-- <el-col :span="24">
                              <div style="overflow:hidden; margin:12px 0">
                                  <div
                                      style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                  </div>
                                  <div style="float:left">扩展保险责任</div>
                              </div>
                          </el-col> -->
                          <!-- <el-col :span="24"><el-form-item label="" style="width:100%">
                                  江苏省南京市雨花客厅
                              </el-form-item></el-col> -->
                          <div style="overflow:hidden; margin:12px 0">
                              <div
                                  style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                              </div>
                              <div style="float:left">费用信息</div>
                          </div>
                          <el-col :span="8"><el-form-item label="保险金额" style="width:100%">
                                  {{ row.totalFee }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="保险费率（单位‰）" style="width:100%">
                                  {{ row.insureRate * 10 }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="保险费用" style="width:100%">
                                  {{ row.insureFee }}
                              </el-form-item></el-col>
                          <el-col :span="24">
                              <div style="overflow:hidden; margin:12px 0">
                                  <div
                                      style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                  </div>
                                  <div style="float:left">发票信息</div>
                              </div>
                          </el-col>
                          <el-col :span="8"><el-form-item label="开具发票" style="width:100%">
                                  {{ row.invoiceStatus ? '是' : '否' }}
                              </el-form-item></el-col>
                          <el-col :span="8"><el-form-item label="发票类型" style="width:100%">
                                  {{ row.invoiceStatus * 1 === 1 ? '专票' : '普票' }}
                              </el-form-item></el-col>

                          <div v-if="row.invoiceStatus">
                              <el-row>
                                  <el-col :span="8">
                                      <el-form-item label="发票抬头">
                                          <span @click="copyClick(row.invoiceHead)" class="cursorPointer">{{
      row.invoiceHead }}</span>
                                      </el-form-item>
                                  </el-col>
                                  <!-- <el-col :span="8">
          <el-form-item label="企业名称">
            {{ row.invoiceHead }}
            <el-input readonly v-model="row.consigneeName" />
          </el-form-item>
        </el-col> -->
                                  <el-col :span="8">
                                      <el-form-item label="税号">
                                          <span @click="copyClick(row.creditCode)" class="cursorPointer">{{
      row.creditCode }}</span>
                                      </el-form-item>
                                  </el-col>
                                  <el-col :span="8" v-if="row.invoiceType === 2">
                                      <el-form-item label="收件人名称">
                                          <span @click="copyClick(row.consigneeName)" class="cursorPointer">{{
      row.consigneeName }}</span>
                                      </el-form-item>
                                  </el-col>
                                  <el-col :span="8" v-if="row.invoiceType === 2">
                                      <el-form-item label="收件人地址">
                                          <span @click="copyClick(row.consigneeAddress)" class="cursorPointer">{{
      row.consigneeAddress }}</span>
                                      </el-form-item>
                                  </el-col>
                                  <el-col :span="8" v-if="row.invoiceType === 2">
                                      <el-form-item label="收件人电话">
                                          <span @click="copyClick(row.consigneePhone)" class="cursorPointer">{{
      row.consigneePhone }}</span>
                                      </el-form-item>
                                  </el-col>
                                  <el-col :span="8">
                                      <el-form-item label="注册地址">
                                          <span @click="copyClick(row.registerAddress)" class="cursorPointer">{{
      row.registerAddress }}</span>
                                      </el-form-item>
                                  </el-col>
                                  <el-col :span="8">
                                      <el-form-item label="统一信用代码">
                                          <span @click="copyClick(row.creditCode)" class="cursorPointer">{{
      row.creditCode }}</span>
                                      </el-form-item>
                                  </el-col>
                                  <el-col :span="8">
                                      <el-form-item label="银行名称">
                                          <span @click="copyClick(row.bankBranchName)" class="cursorPointer">{{
      row.bankBranchName }}</span>
                                      </el-form-item>
                                  </el-col>
                                  <el-col :span="8">
                                      <el-form-item label="银行账号">
                                          <span @click="copyClick(row.bankAccount)" class="cursorPointer">{{
                                              row.bankAccount }}</span>
                                      </el-form-item>
                                  </el-col>
                              </el-row>
                          </div>
                      </el-row>
                  </el-card>
              </el-tab-pane>
          </el-tabs>

          <el-col :span="24" v-if="isExamine"><el-form-item label="审核">
                  <el-select v-model="form.region" placeholder="审核">
                      <el-option label="通过" value="shanghai"></el-option>
                      <el-option label="不通过" value="beijing"></el-option>
                  </el-select>
              </el-form-item></el-col>
          <el-col :span="24" v-if="isExamine"><el-form-item label="备注">
                  <el-input type="textarea" v-model="form.desc"></el-input>
              </el-form-item></el-col>
      </el-form>


      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { getLabel } from '@/utils/func.js'
import { ReportStatus } from '@/utils/options'
export default {
  data() {
      return {
          getLabel,
          ReportStatus,
          reportStatus: 0,
          stepList: [],
          activeName: 'first',
          title: '查看',
          dialogFormVisible: false,
          isExamine: false,
          form: {
              user: '',
              region: '',
              desc: ''
          },
          row: {
            frontReportInsureAccount: {},
            frontReportInsure: {},
          }
      }
  }
}
</script>
